<template>
  <div class="loading-demo">
    <h2>自定义 Loading 效果示例</h2>

    <!-- 控制面板 -->
    <div class="control-panel">
      <el-button type="primary" @click="showLoading(1)">圆环加载</el-button>
      <el-button type="success" @click="showLoading(2)">点波纹</el-button>
      <el-button type="warning" @click="showLoading(3)">方块翻转</el-button>
      <el-button type="info" @click="showLoading(4)">进度条</el-button>
      <el-button type="danger" @click="hideLoading">关闭加载</el-button>
    </div>

    <!-- 加载效果展示区 -->
    <div class="demo-container">
      <!-- 圆环加载 -->
      <div v-show="currentType === 1" class="loading-item circle-loading">
        <div class="circle-wrap">
          <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none"/>
          </svg>
          <p class="loading-text">加载中...</p>
        </div>
      </div>

      <!-- 点波纹 -->
      <div v-show="currentType === 2" class="loading-item dot-loading">
        <div class="dot-wrap">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <p class="loading-text">加载中...</p>
      </div>

      <!-- 方块翻转 -->
      <div v-show="currentType === 3" class="loading-item cube-loading">
        <div class="cube-wrap">
          <div class="cube">
            <div class="side front"></div>
            <div class="side back"></div>
            <div class="side right"></div>
            <div class="side left"></div>
            <div class="side top"></div>
            <div class="side bottom"></div>
          </div>
        </div>
        <p class="loading-text">加载中...</p>
      </div>

      <!-- 进度条 -->
      <div v-show="currentType === 4" class="loading-item progress-loading">
        <div class="progress-wrap">
          <div class="progress-bar" :style="{ width: progress + '%' }"></div>
          <p class="loading-text">{{ progress }}%</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoadingDemo',
  
  data() {
    return {
      currentType: 0,
      progress: 0,
      progressTimer: null
    };
  },

  methods: {
    showLoading(type) {
      this.currentType = type;
      if (type === 4) {
        this.startProgress();
      }
    },

    hideLoading() {
      this.currentType = 0;
      this.stopProgress();
    },

    startProgress() {
      this.progress = 0;
      this.stopProgress();
      this.progressTimer = setInterval(() => {
        if (this.progress < 100) {
          this.progress += Math.floor(Math.random() * 10) + 1;
          if (this.progress > 100) this.progress = 100;
        } else {
          this.stopProgress();
        }
      }, 200);
    },

    stopProgress() {
      if (this.progressTimer) {
        clearInterval(this.progressTimer);
        this.progressTimer = null;
      }
    }
  },

  beforeDestroy() {
    this.stopProgress();
  }
};
</script>

<style scoped>
.loading-demo {
  padding: 20px;
}

h2 {
  color: #2c3e50;
  border-bottom: 2px solid #1976d2;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.control-panel {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.demo-container {
  height: 400px;
  background: #f8f9fa;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-item {
  text-align: center;
}

.loading-text {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}

/* 圆环加载 */
.circle-loading .circular {
  width: 50px;
  height: 50px;
  animation: rotate 2s linear infinite;
}

.circle-loading .path {
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 4;
  stroke: #1976d2;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* 点波纹 */
.dot-loading .dot-wrap {
  display: flex;
  gap: 6px;
}

.dot-loading .dot {
  width: 12px;
  height: 12px;
  background: #1976d2;
  border-radius: 50%;
  animation: bounce 0.5s ease-in-out infinite;
}

.dot-loading .dot:nth-child(2) { animation-delay: 0.1s; }
.dot-loading .dot:nth-child(3) { animation-delay: 0.2s; }
.dot-loading .dot:nth-child(4) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 方块翻转 */
.cube-loading .cube {
  width: 40px;
  height: 40px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate-cube 2s infinite linear;
}

.cube .side {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #1976d2;
  opacity: 0.8;
}

.cube .front  { transform: rotateY(0deg) translateZ(20px); }
.cube .back   { transform: rotateY(180deg) translateZ(20px); }
.cube .right  { transform: rotateY(90deg) translateZ(20px); }
.cube .left   { transform: rotateY(-90deg) translateZ(20px); }
.cube .top    { transform: rotateX(90deg) translateZ(20px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(20px); }

@keyframes rotate-cube {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 进度条 */
.progress-loading .progress-wrap {
  width: 300px;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-loading .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1976d2, #42a5f5);
  border-radius: 10px;
  transition: width 0.2s ease;
}

.progress-loading .loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .control-panel {
    flex-direction: column;
  }

  .progress-loading .progress-wrap {
    width: 200px;
  }
}
</style> 